import React from 'react';
import { inject, observer } from 'mobx-react';
import { Modal, message, Button,Tag,Spin } from "antd";

import { WeaLocaleProvider, WeaTop, WeaRightMenu, WeaTab, WeaReqTop, WeaDialog,WeaTag,WeaAlertPage} from 'ecCom';
import { WeaTableNew } from "comsMobx";
import {Condition,getAdButtons} from '../list/listCondition';
import {Text} from '../util/text';
import {InfoTag} from '../util/infoTag';
const text = new Text();

const WeaTable = WeaTableNew.WeaTable;
const getLabel = WeaLocaleProvider.getLabel;

@inject("adjustListStore")
@observer
class AdjustList extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
        }
    }

    componentDidMount() {
        const {adjustListStore} = this.props;
        adjustListStore.loadingSpin = true;
        adjustListStore.tabs = [];
        adjustListStore.getInfoAdjustmentList();
    }

    componentWillReceiveProps(nextProps) {
        const {adjustListStore} = this.props;
        if (this.props.location.key !== nextProps.location.key) {
            adjustListStore.selectTabKey = "";
            adjustListStore.loadingSpin = true;
            adjustListStore.tabs = [];
            adjustListStore.getInfoAdjustmentList();
        }
    }

    getTopButtons = () => {
        const {adjustListStore} = this.props;
        let btns = [];
        btns.push(
            adjustListStore.getTopButton()
        )
        return btns;
    }
    changeTab(key) {
        const {adjustListStore} = this.props;
        adjustListStore.changeTab(key);
    }

    onOperatesClick = (record, index, operate, flag) => {
        const {adjustListStore} = this.props;
        if (operate.index == 0) {   //编辑
            adjustListStore.getInfoAdjustmentCondition({ id: record.id,type:'edit'});
            adjustListStore.setState({ visible: true });
        } else if(operate.index == 1) {  //删除
            adjustListStore.deleteInfoAdjustment({ids:record.id});
        }
    }

    onChange = (n, text, record, index) => {
        const { adjustListStore } = this.props;
        adjustListStore.getInfoAdjustmentCondition({ id: record.id,type:'edit'});
        //adjustListStore.setState({ visible: true });
    }

    reRenderColumns(columns) {
        columns.forEach(c => {
            if (c.dataIndex == 'reason') {
                c.render = (text, record, index) => {
                    let valueSpan = record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }} style={{ cursor: "pointer" }} onClick={(v) => this.onChange(v, text, record, index) }></span>
                }
            }else if (c.dataIndex == 'adjusttype') {
                c.render = (text, record,index) => {
                    let valueSpan = record[c.dataIndex + "span"];
                    if(record[c.dataIndex] == '1') {
                        return <InfoTag ecId={`${this && this.props && this.props.ecId || ''}_InfoTag@t7w1kf`} color='#F14A2D' name={valueSpan}></InfoTag>
                    } else {
                        return <InfoTag ecId={`${this && this.props && this.props.ecId || ''}_InfoTag@2tkgjc`} color='#87d068' name={valueSpan}></InfoTag>
                    }
                }
            } else {
                c.render = function (text, record) {
                    let valueSpan = record[c.dataIndex + "span"] !== undefined ? record[c.dataIndex + "span"] : record[c.dataIndex];
                    return <span dangerouslySetInnerHTML={{ __html: valueSpan }}></span>
                }
            }
        })
        return columns;
    }

    render() {
        const { adjustListStore} = this.props;
        const {loadingSpin, isRight,reLoad, tableStore, title, status: {loading, visible}, setState, selectTabKey, tabs, form, condition, saveInfoAdjustment} = adjustListStore;
        const rightMenu = adjustListStore.getRightMenu();
        const {searchForm, searchCondition, showSearchAd} = adjustListStore;
        const formParams = searchForm.getFormParams() || {};
        if (loadingSpin) {
            return <div className="h100" style={{ textAlign: 'center', paddingTop: '300px' }}><Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@15h42j`} size="large"/></div>
        }
        if (!isRight) {
            return <WeaAlertPage ecId={`${this && this.props && this.props.ecId || ''}_WeaAlertPage@b1uuvp`}><div>{getLabel(382663, '暂无权限') }</div></WeaAlertPage>
        }
        return (
            <div>
                <WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@x13u2r`}
                    datas={rightMenu}>

                    <div style={{ backgroundColor: '#fff' }}>
                        <WeaTop ecId={`${this && this.props && this.props.ecId || ''}_WeaTop@f2jlgq`}
                            title={title}
                            icon={<i className='icon-coms-government' />}
                            iconBgcolor='#f14a2d'
                            loading={loading}
                            buttons={this.getTopButtons() }
                            showDropIcon={true}
                            dropMenuDatas={rightMenu}
                            >
                            <WeaTab ecId={`${this && this.props && this.props.ecId || ''}_WeaTab@hf9fvs`}
                                leftStyle={{ width: '80%' }}
                                datas={tabs}
                                keyParam="key"  //主键
                                selectedKey={selectTabKey}
                                onChange={this.changeTab.bind(this) } 
                                buttonsAd={getAdButtons(adjustListStore) }
                                searchType={['base', 'advanced']}
                                searchsBaseValue={formParams.title}
                                setShowSearchAd={bool => { adjustListStore.setShowSearchAd(bool) } }
                                hideSearchAd={() => adjustListStore.setShowSearchAd(false) }
                                searchsAd={
                                    <div><Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@9wifad`} listStore={adjustListStore} form={searchForm} condition={searchCondition} onEnterSearch={()=>{adjustListStore.doSearch();adjustListStore.setShowSearchAd(false);}}  ></Condition></div>
                                }
                                showSearchAd={showSearchAd}
                                onSearch={v => { adjustListStore.doSearch() } }
                                onSearchChange={v => {
                                    if (adjustListStore.searchForm.has("title")) {
                                        adjustListStore.appendFormFields({ title: { value: v } })
                                    } else {
                                        adjustListStore.searchForm.add(v, { key: "title" })
                                    }
                                } }/>
                            <WeaTable ecId={`${this && this.props && this.props.ecId || ''}_WeaTable@xey7v2`} className="wea-info-table" comsWeaTableStore={tableStore}  needScroll={true} register_table={() => reLoad() } getColumns={c => this.reRenderColumns(c) } onOperatesClick={this.onOperatesClick.bind(this) }/>
                            <WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@fsmf7h`}
                                icon="icon-coms-government"
                                iconBgcolor='#f14a2d'
                                title={text.REWARDINFO}
                                visible={visible}
                                style={{ width: 550, height: 450 }}
                                hasScroll= {true}
                                onCancel={() => { setState({ visible: false }) } }
                                buttons={[(<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@gpnm1q@saveInfoAdjustment`} type="primary"  onClick={() => saveInfoAdjustment() }>{text.SURE}</Button>),
                                    (<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@nnzr27@CANCEL`} type="ghost" onClick ={() => { setState({ visible: false }) } }>{text.CANCEL}</Button>)
                                ]}
                                >
                                <Condition ecId={`${this && this.props && this.props.ecId || ''}_Condition@pqtzae`}  form={form} condition={condition} ></Condition>
                            </WeaDialog>
                        </WeaTop>
                    </div>

                </WeaRightMenu>
            </div>
        )
    }

}

export default AdjustList;